<template>
    <div class="city">
        <div class="head">
            <router-link to="/"><span class="iconfont icon-chevron-thin-left sp1"></span></router-link>
            <p class="p1">选择城市</p>
        </div>
        <div class="cen">
            <p class="p2">请根据您的收货地址选择地区</p>
            <div class="fa">
                <span class="iconfont icon-fangdajing sp2"></span>
                <input type="text" placeholder="搜索">
                <span class="iconfont icon-quxiao sp3"></span>
            </div>
        </div>

        <van-index-bar>
            <van-index-anchor index="A" />
                <van-cell v-for="(v,i) in cityA" :key="i" :title="v" @click="fun(v)"/>
            <van-index-anchor index="B" />
                <van-cell v-for="(v,i) in cityB" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="C" />
                <van-cell v-for="(v,i) in cityC" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="D" />
                <van-cell v-for="(v,i) in cityD" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="E" />
                <van-cell v-for="(v,i) in cityE" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="F" />
                <van-cell v-for="(v,i) in cityF" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="G" />
                <van-cell v-for="(v,i) in cityG" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="H" />
                <van-cell v-for="(v,i) in cityH" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="J" />
                <van-cell v-for="(v,i) in cityJ" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="K" />
                <van-cell v-for="(v,i) in cityK" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="L" />
                <van-cell v-for="(v,i) in cityL" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="M" />
                <van-cell v-for="(v,i) in cityM" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="N" />
                <van-cell v-for="(v,i) in cityN" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="P" />
                <van-cell v-for="(v,i) in cityP" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="Q" />
                <van-cell v-for="(v,i) in cityQ" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="R" />
                <van-cell v-for="(v,i) in cityR" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="S" />
                <van-cell v-for="(v,i) in cityS" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="T" />
                <van-cell v-for="(v,i) in cityT" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="W" />
                <van-cell v-for="(v,i) in cityW" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="X" />
                <van-cell v-for="(v,i) in cityX" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="Y" />
                <van-cell v-for="(v,i) in cityY" :key="i" :title="v" @click="fun(v)"/>
             <van-index-anchor index="Z" />
                <van-cell v-for="(v,i) in cityZ" :key="i" :title="v" @click="fun(v)"/>
           
        </van-index-bar>
    </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
export default {
    props:["title"],
    data() {
        return {
            cityA:[],
            cityB:[],
            cityC:[],
            cityD:[],
            cityE:[],
            cityF:[],
            cityG:[],
            cityH:[],
            cityJ:[],
            cityK:[],
            cityL:[],
            cityM:[],
            cityN:[],
            cityP:[],
            cityQ:[],
            cityR:[],
            cityS:[],
            cityT:[],
            cityW:[],
            cityX:[],
            cityY:[],
            cityZ:[]
        
        }
    },
    created(){
        getlink("/data/ddg").then((ok)=>{
            this.cityA=ok.data.city[1].cityA
            this.cityB=ok.data.city[2].cityB
            this.cityC=ok.data.city[3].cityC
            this.cityD=ok.data.city[4].cityD
            this.cityE=ok.data.city[5].cityE
            this.cityF=ok.data.city[6].cityF
            this.cityG=ok.data.city[7].cityG
            this.cityH=ok.data.city[8].cityH
            this.cityJ=ok.data.city[9].cityJ
            this.cityK=ok.data.city[10].cityK
            this.cityL=ok.data.city[11].cityL
            this.cityM=ok.data.city[12].cityM
            this.cityN=ok.data.city[13].cityN
            this.cityP=ok.data.city[14].cityP
            this.cityQ=ok.data.city[15].cityQ
            this.cityR=ok.data.city[16].cityR
            this.cityS=ok.data.city[17].cityS
            this.cityT=ok.data.city[18].cityT
            this.cityW=ok.data.city[19].cityW
            this.cityX=ok.data.city[20].cityX
            this.cityY=ok.data.city[21].cityY
            this.cityZ=ok.data.city[22].cityZ
            // console.log(this.cityA)
        })
    },
    methods:{
        fun(){
            this.$router.push("/Home")
        }
    }   
}
</script>

<style scoped>
    .city{
        position: relative;
        font-size: 0.12rem;
        text-align: center;
        line-height: 0.3rem;
    }
    .sp1{
        position: absolute;
        left: 0.1rem;
        color: red;
        font-size: 0.2rem;
    }
    .p1{
        font-size: 0.16rem;
    }
    .cen{
        background-color:rgb(236, 236, 236);
        box-sizing: border-box;
        padding: 0.1rem;
    }
    .p2{
        color: red;
    }
    .fa{
        border: 1px solid #ddd;
        width: 90%;
        margin: 0 auto;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
    }
    input{
        border: none;
        outline: none;
        width: 100%;
        height: 0.3rem;
        border: 0.1rem;
        text-indent: 0.26rem;
    }
    .sp2,.sp3{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.14rem;
        color: gray;
    }
    .sp2{
        left: 0.05rem;
    }
    .sp3{
        right: 0.1rem;
    }
</style>